<template>
    <view class="bg-content">
        <div style="padding: 15px; margin-bottom: 10px; background-color: white;">
            <u-time-line node-top="2">
                <u-time-line-item v-if="objParams.progress5Time">
                    <div slot="node">
                        <view class="u-node" :style="{'background': lightNode5 ? '#19be6b': '#d0d0d0'}"></view>
                    </div>
                    <div slot="content">
                        <view>
                            <view class="u-order-title">{{objParams.progress5Text}}</view>
                            <view class="u-order-desc">{{objParams.progress5Remark}}</view>
                            <view class="u-order-time">{{objParams.progress5Time}}</view>
                        </view>
                    </div>
                </u-time-line-item>
                <u-time-line-item v-if="objParams.progress4Time">
                    <div slot="node">
                        <view class="u-node" :style="{'background': lightNode4 ? '#19be6b': '#d0d0d0'}"></view>
                    </div>
                    <div slot="content">
                        <view>
                            <view class="u-order-title">{{objParams.progress4Text}}</view>
                            <view class="u-order-desc">{{objParams.refundRefuseReason}}</view>
                            <view class="u-order-time">{{objParams.progress4Time}}</view>
                        </view>
                    </div>
                </u-time-line-item>
                <u-time-line-item v-if="objParams.progress3Time">
                    <div slot="node">
                        <view class="u-node" :style="{'background': lightNode3 ? '#19be6b': '#d0d0d0'}"></view>
                    </div>
                    <div slot="content">
                        <view>
                            <view class="u-order-title">{{objParams.progress3Text}}</view>
                            <view class="u-order-desc">{{objParams.progress3Remark}}</view>
                            <view class="u-order-time">{{objParams.progress3Time}}</view>
                        </view>
                    </div>
                </u-time-line-item>
                <u-time-line-item v-if="objParams.progress2Time">
                    <div slot="node">
                        <view class="u-node" :style="{'background': lightNode2 ? '#19be6b': '#d0d0d0'}"></view>
                    </div>
                    <div slot="content">
                        <view>
                            <view class="u-order-title">{{objParams.progress2Text}}</view>
                            <view class="u-order-desc">
                                <div>
                                    快递公司：{{objParams.refundGoodsLogisticsCompanyName}}
                                </div>
                                <div>
                                    快递单号：{{objParams.refundGoodsLogisticsNo}}
                                </div>
                                <div v-if="objParams.progress2Remark">备注：{{objParams.progress2Remark}}</div>
                                <div>
                                    物流轨迹：{{objParams.tbLogisticsTracesText}}
                                    <label style="text-decoration: underline; padding-left: 10px;" @click="gotoOrderDetailLogistics(objParams)">查看详情</label>
                                </div>
                            </view>
                            <view class="u-order-time">{{objParams.progress2Time}}</view>
                        </view>
                    </div>
                </u-time-line-item>
                <u-time-line-item v-if="objParams.progress1Time">
                    <div slot="node">
                        <view class="u-node" :style="{'background': lightNode1 ? '#19be6b': '#d0d0d0'}"></view>
                    </div>
                    <div slot="content">
                        <view>
                            <view class="u-order-title">{{objParams.progress1Text}}</view>
                            <view class="u-order-desc">
                                <div>
                                    退货联系人：{{objParams.refundGoodsConsignee}}
                                </div>
                                <div>
                                    退货联系电话：{{objParams.refundGoodsPhone}}
                                </div>
                                <div>退货地址：
                                    {{objParams.refundGoodsProvinceName}}<label style="padding-left: 2px;"></label>
                                    {{objParams.refundGoodsCityName}}<label style="padding-left: 2px;"></label>
                                    {{objParams.refundGoodsAreaName}}<label style="padding-left: 2px;"></label>
                                    {{objParams.refundGoodsAddress}}<label style="padding-left: 2px;"></label>
                                </div>
                                <div v-if="objParams.progress1Remark">
                                    商家备注：{{objParams.progress1Remark}}
                                </div>
                            </view>
                            <view class="u-order-time">{{objParams.progress1Time}}</view>
                        </view>
                    </div>
                </u-time-line-item>
                <u-time-line-item v-if="objParams.progress0Time">
                    <div slot="node">
                        <view class="u-node" :style="{'background': lightNode0 ? '#19be6b': '#d0d0d0'}"></view>
                    </div>
                    <div slot="content">
                        <view>
                            <view class="u-order-title">{{objParams.progress0Text}}</view>
                            <view class="u-order-desc">售后原因：{{objParams.afterSaleReason}}</view>
                            <view class="u-order-time">{{objParams.progress0Time}}</view>
                        </view>
                    </div>
                </u-time-line-item>
            </u-time-line>
        </div>

        <div style="display: flex; margin-bottom: 10px; background-color: white; padding: 15px;">
            <div>
                <image :src="objParams.tbOrderGoods.image ? objParams.tbOrderGoods.image + '?imageView2/1/w/100/h/100' : '/pages/sub/sub1-tabs/static/default-image/goods.jpg'"
                       mode="aspectFill" style="width: 100px; height: 100px;"></image>
            </div>
            <div style="padding-left: 10px;">
                <div style="font-size: 14px;">
                    {{ objParams.tbOrderGoods.title }}
                </div>
                <div style="font-size: 12px; color: grey;">
                    {{objParams.tbOrderGoods.specName}}
                    <label v-if="objParams.tbOrderGoods.colorId">;{{objParams.tbOrderGoods.colorName}}</label>
                </div>
                <div style="width: 100%; font-size: 12px;">
                    申请数量：{{objParams.quantity}}
                </div>
                <div style="width: 100%; text-align: right; padding-right: 5px;" v-if="objParams.payMode === '0' && objParams.afterSaleType === '1'">
                    退款金额：<label style="color: red;">￥{{(objParams.refundMoney) | toFixed2}}</label>
                </div>
            </div>
        </div>

        <div style="background-color: white; padding: 15px; line-height: 1.5;">
            <u-cell-item :arrow="false" :border-bottom="false" use-label-slot :title-style="{'width': '100%'}">
                <div slot="title">
                    <div>服务单号：{{objParams.code}}</div>
                    <div v-if="objParams.refundTradeNo">退款流水号：{{objParams.refundTradeNo}}</div>
                    <div>售后类型：{{objParams.afterSaleTypeText}}</div>
                    <div>申请时间：{{objParams.afterSaleApplyTime}}</div>
                    <div v-if="objParams.afterSaleHandlingTime">处理时间：{{objParams.afterSaleHandlingTime}}</div>
                    <div v-if="objParams.afterSaleCompletedTime">完成时间：{{objParams.afterSaleCompletedTime}}</div>
                </div>
            </u-cell-item>
        </div>
    </view>
</template>

<script>

    import {SysDictionaryService} from "@/dev/services/sys-dictionary.service";

    export default {
        data() {
            return {
                lightNode0: false,
                lightNode1: false,
                lightNode2: false,
                lightNode3: false,
                lightNode4: false,
                lightNode5: false,
            }
        },
        onReady() {
            const _self = this;
            new SysDictionaryService().optionList('tb_order_goods_after_sale@progress', null).then(result => {
                result.forEach((item, index) => {
                    _self.objParams[`progress${item.code}Text`] = item.name;
                    _self.$forceUpdate();
                });
                console.log(_self.objParams)
            });

            // 高亮最后一个节点
            for (let i = 0; i <= 5; i++) {
                if (_self.objParams[`progress${5 - i}Time`]) {
                    this[`lightNode${5 - i}`] = true;
                    break;
                }
            }
        },
        methods: {
            gotoOrderDetailLogistics(tbOrderGoodsAfterSale) {
                let urlParams = {
                    logisticsCompanyName: tbOrderGoodsAfterSale.refundGoodsLogisticsCompanyName,
                    logisticsNo: tbOrderGoodsAfterSale.refundGoodsLogisticsNo,
                    tbLogisticsTracesText: tbOrderGoodsAfterSale.tbLogisticsTracesText,
                };
                this.navigateTo(`/pages/sub/sub1-tabs/tabs/person/order/order-logistics/index`, urlParams, tbOrderGoodsAfterSale.tbLogisticsTraces);
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
